RemixでAWSサーバレス構成を手軽に作成できるGrunge Stackを試してみた

RemixでAWSサーバレス構成を手軽に作成できるGrunge Stackを試してみました。

#Remix

#React

#AWS

森茂洋

2022.03.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、CX事業本部MAD事業部の森茂です。

先日リリースされたRemix Stacks、Remixチームが公開しているAWSを利用したサーバレス構成のGrunge Stackテンプレートがどのような構成になっているのかを調べるために早速デプロイまでの流れを試してみました。

Grunge Stack

Grunge StackはAWSを利用したサーバレス構成のアプリケーションテンプレートです。サーバレスフレームワークとしてはArchitectを利用しています。データベースにはDynamoDBを利用し、アプリケーションはCloudFormationを利用してLambdaへデプロイされAPI Gatewayを介して公開されます。また開発用にローカル環境のサンドボックス環境も用意されているのでAWS環境へデプロイせずに動作を確認することが可能です。（サンドボックス環境のDynamoDBはインメモリーデータベースとなるのでデータが永続化されません。そのためサーバーの再起動ごとに新規データとなるので注意が必要です。）

なお、Grunge Stackを使ったアプリケーションの実際の運用時には、API Gatewayにカスタムドメインを割り当て独自ドメインで公開するような使い方が想定されます。

Grunge StackのAWS環境

付随して作成される細かなリソースは省略していますが大まかなリソースは以下のような形になります。

Grunge Stack に用意されている機能一覧（公式ドキュメントより抜粋）

AWS deployment with Architect
Production-ready DynamoDB Database
GitHub Actions for deploy on merge to production and staging environments
Email/Password Authentication with cookie-based sessions
DynamoDB access via arc.tables
Styling with Tailwind
End-to-end testing with Cypress
Local third party request mocking with MSW
Unit testing with Vitest and Testing Library
Code formatting with Prettier
Linting with ESLint
Static Types with TypeScript

事前準備

Grunge Stackの利用にはAWS環境のデプロイにArchitectを利用するため、AWS CLI、また認証の設定などをあらかじめ完了しておく必要があります。（ArchitectではCloudFormationとパラメータストアを利用して環境を構築するため構築内容にあわせた権限が必要となります。）

今回は下記の形で認証情報が設定されていることを前提としています。

項目	設定
リージョン	ap-northeast-1
プロファイル名	default
アクセス権限	AdministratorAccess

AWS CLIについての環境の参考情報

Remix The Grunge Stackのインストール

RemixのCLIを利用してGrunge Stackをインストールします。

$ npx create-remix@latest

$ npx create-remix@latest

Need to install the following packages:
create-remix@latest
Ok to proceed? (y) y
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
? Where would you like to create your app? /remix-grunge-stack
? What type of app do you want to create? A pre-configured stack ready for production
? Which Stack do you want? (Learn more about these stacks: https://remix.run/stacks)
Blues
Indie
❯ Grunge
? Do you want me to run `npm install`? Yes

...各種パッケージのインストール処理

? Running remix.init script
? Do you want to run the build/tests/etc to verify things are setup properly? (y/N)
✅ Project is ready! Start development with "npm run dev"
? That's it! `cd` into "remix-grunge-stack" and check the README for development and deploy instructions!

インストール完了後、アプリケーションが起動するか確認しておきます。

$ npm run dev

Rebuilding...
Done in 108ms.
? File created: app/styles/tailwind.css
⚠️ Test routes enabled.
? Rebuilding...
? Rebuilt in 194ms
App ⌁ remix-grunge-stack-c9cc
Region ⌁ us-west-2
Profile ⌁ default
Version ⌁ Architect 10.1.0
cwd ⌁ /remix-grunge-stack

✓ Sandbox Found Architect project manifest: app.arc
✓ Sandbox Found testing environment variables: .env
✓ Sandbox Using testing live AWS infra: @tables
✓ Sandbox Started AWS service emulator
✓ Sandbox @tables created in local database
✓ Sandbox @http server started
✓ Sandbox Project files hydrated into functions
✓ Sandbox Available @http (HTTP API mode / Lambda proxy v2.0 format) routes
any /\* ................................ server

    http://localhost:3000

✓ Sandbox Started in 53ms
❤︎ Local environment ready!

✓ Sandbox Started file watcher

http://localhost:3000をブラウザで開いてGrunge Stackのページが確認できました。

Architectの設定

Grunge Stackインストール時の初期設定時にはAWSの利用リージョンがus-west-2となっているためap-northeast-1を利用するように設定ファイルを変更します。ArchitectではAWSリソースの設定をapp.arcファイルに記載します。

Grunge Stackを利用するためのAWSリソースについてはすでに記載されているのでリージョン設定と利用プロファイル名（defaultの場合は記載がなくても問題ありません）のみ追記します。

その他設定できる項目については公式ドキュメントを参照ください。

Architect documentation

# @awsとしてAWSリソースの設定を追記
@aws
region ap-northeast-1
profile default

@app # アプリケーションの名称（各リソースの名前空間として利用される、CLIインストール時に自動生成される）
remix-grunge-stack-c9cc

@http # API Gatewayの設定
/*
  method any
  src server

@static # S3バケットの設定

@tables # DynamoDBの設定
user
  pk *String

password
  pk *String # userId

note
  pk *String  # userId
  sk **String # noteId

GitHub リポジトリの用意

Grunge StackはデプロイにGitHub Actionsを利用するため新規リポジトリを用意しておきます。 GitHub Actionsの環境変数にAWSへアクセスするためのAWSのアクセスキー（アクセスキーIDとシークレットアクセスキー）を設定する必要があるため、AWSマネジメントコンソール等で用意します。

AWSマネジメントコンソール - IAM セキュリティ認証情報

用意したリポジトリにAWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEYとしてAWSのアクセスキーを登録します。

暗号化されたシークレット - GitHub Docs

環境変数の設定

Grunge Stackアプリケーション内で利用している環境変数をLambda上で利用できるようにArchitectが用意している作法で環境変数を登録します。arc envコマンドでAWSのパラメーターストアに変数を登録することでその値がアプリケーションのデプロイ時にLambda上の環境変数へ反映される仕組みになっています。

$ npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
$ npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
$ npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
$ npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)

アプリケーションで他の環境変数が必要になった場合には同じ方法で都度追加する必要があります。

デプロイ

Grunge StackのGitHub Actionsにはmainブランチにpushされた場合にはproduction環境、devブランチにpushされた場合にはstaging環境としてデプロイされる仕組みがすでに用意されています。

準備が整ったところでmainブランチにpushしてみます。

各種CIに登録されているテストが走り、その後デプロイタスクが動き出すので完了を待ちます。

実際にアクセスするURLはAWSマネジメントコンソールからCloudFormationの出力タブで確認するか、GitHub Actionsのログから知ることができます。

CloudFormationで作成されるリソース

独自ドメインでの運用

API Gatewayにカスタムドメインを割り当てることで独自ドメインでの運用も可能です。ドメインをAWSで運用しているか別で運用しているかでやり方が異なりますので詳しくは下記記事を参照ください。

Stackソースコード

ちょうど公式ドキュメントのチュートリアルがIndie Stackをベースとしたものに切り替わりました。Grunge StackとはDynamoDBへデータを保存する部分がPrismaを利用してPostgreSQLに保存という形にはなりますがその他のロジックは同じものとなっています。

RemixでのCRUD処理やFormの使い方が参照できるのでぜひこちらも試してみてください。

さいごに

Remix StacksのThe Grunge Stackを使ってAWS環境へアプリケーションをデプロイしてみました。Architect独自の設定はあるものの一度設定を用意すればGitHub Actionsを使って簡単にデプロイできるので運用はかなり楽になりそうです。ぜひRemix Grunge StackとAWSを使ってお手軽なサーバーレス環境を構築してみてはいかがでしょうか。